import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/entity/match/secret_price_entity.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/tip_widget.dart';
import 'package:ball_lion/module/pick/information/information_pay_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/widgets/card.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';

class InformationPayPage extends StatefulWidget {
  const InformationPayPage({super.key});

  @override
  State<InformationPayPage> createState() => _InformationPayPageState();
}

class _InformationPayPageState extends State<InformationPayPage> {
  final InformationPayLogic logic = Get.put(InformationPayLogic());
  @override
  Widget build(BuildContext context) {
    return GetBuilder<InformationPayLogic>(builder: (logic) {
      return WillPopScope(
        onWillPop: () async {
          Get.back(result: true);
          return true;
        },
        child: Scaffold(
          backgroundColor: Colours.greyF2F3F7,
          appBar: Styles.appBar(
              backgroundColor: Colours.transparent,
              title: const QsText("海外情报"),
              titleTextStyle: const TextStyle(
                  color: Colours.text,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
              onTapLeading: () => Get.back(result: true)),
          body: SizedBox(
            height: Get.height,
            child: Stack(
              children: [
                SingleChildScrollView(
                  physics: const ClampingScrollPhysics(),
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 140),
                    child: Column(
                      children: [
                        Block(
                            cardStyle: const CardStyle(
                                margin: EdgeInsets.fromLTRB(12, 10, 12, 0),
                                padding: EdgeInsets.only(left: 10, top: 12)),
                            child: _info()),
                        if (logic.price.hasValue)
                          Block(
                              cardStyle: const CardStyle(
                                  margin: EdgeInsets.fromLTRB(12, 10, 12, 0),
                                  padding: EdgeInsets.symmetric(vertical: 12)),
                              child: _subscribeChoice()),
                        if (logic.tip.hasValue)
                          Block(
                              cardStyle: const CardStyle(
                                  margin: EdgeInsets.fromLTRB(12, 10, 12, 0),
                                  padding: EdgeInsets.fromLTRB(12, 12, 12, 20)),
                              child: _notice())
                      ],
                    ),
                  ),
                ),
                Positioned(bottom: 0, left: 0, right: 0, child: _payBar())
              ],
            ),
          ),
        ),
      );
    });
  }

  Widget _info() {
    return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Image.asset(Utils.getImgPath("secret_icon.png"), width: 62, height: 64),
      Container(width: 14),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(height: 4),
          QsText("海外情报", fontSize: 16),
          QsText("独家情报，尽在海外情报", color: Colours.grey99),
        ],
      )
    ]);
  }

  Widget _subscribeChoice() {
    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Container(height: 10),
      SizedBox(
        height: 136,
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 1),
          itemExtent: (Get.width - 58) / 3 + 7,
          scrollDirection: Axis.horizontal,
          children: List<Widget>.generate(logic.price?.length ?? 0,
              (index) => _price(index).paddingOnly(right: 7)),
        ),
      ),
      Container(height: 10)
    ]);
  }

  Widget _notice() {
    return Column(
      children: [
        QsText("购买须知", fontSize: 16, fontWeight: FontWeight.w500),
        Container(height: 16),
        const TipWidget(
            type: "secret_pay_tip",
            fontSize: 14,
            lineHeight: 1.6,
            textColor: Colours.grey66)
      ],
    );
  }

  Widget _payBar() {
    SecretPrices? price =
        logic.price.hasValue == true ? (logic.price?[logic.priceIndex]) : null;
    return Column(
      children: [
        Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          child: Row(
            children: [
              QsText(
                  price?.price == 0
                      ? "限时免费"
                      : "${price?.price ?? " "}球币".changeUnit,
                  fontSize: 16,
                  color: Colours.main,
                  fontWeight: FontWeight.w500),
              Container(width: 4),
              // if (price?.needPrices != price?.prices && price?.prices != null)
              //   QsText(price?.price ?? "",
              //     style: const TextStyle(
              //       fontSize: 12,
              //       decoration: TextDecoration.lineThrough,
              //       color: Colours.grey99)),
              const Spacer(),
              QsButton(
                width: 108,
                height: 40,
                onPressed: () {
                  Utils.onEvent('news_pay');
                  if (price?.price != null) {
                    logic.toPay(price!);
                  }
                },
                borderRadius: 20,
                backgroundColor: Colours.main,
                foregroundColor: Colours.white,
                text: "立即支付",
                textStyle:
                    const TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
              )
            ],
          ),
        ),
        Container(
            color: Colours.white, height: MediaQuery.of(context).padding.bottom)
      ],
    );
  }

  Widget _price(int index) {
    var price = logic.price?[index];
    var align = Alignment.center;
    if (index == 0) align = Alignment.centerLeft;
    if (index == 2) align = Alignment.centerRight;
    return GestureDetector(
      onTap: () => logic.priceIndex = index,
      child: SizedBox(
        height: 135,
        child: Stack(
          alignment: AlignmentDirectional.topCenter,
          children: [
            Container(
              height: 132,
              alignment: align,
              clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                  color: logic.priceIndex == index
                      ? Colours.main.withOpacity(0.05)
                      : Colours.white,
                  border: Border.all(
                      color: logic.priceIndex != index
                          ? Colours.redFDD9D9
                          : Colours.main,
                      width: logic.priceIndex != index ? 0.5 : 1,
                      strokeAlign: BorderSide.strokeAlignOutside),
                  borderRadius: BorderRadius.circular(8)),
              child: Column(
                children: [
                  Container(
                      width: Get.width,
                      height: 28,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: logic.priceIndex != index
                              ? Colours.redFFF4F4
                              : Colours.main.withOpacity(0.2)),
                      child: QsText(price?.name ?? "")),
                  SizedBox(
                    width: Get.width,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(height: 16),
                        price?.price == "0球币"
                            ? QsText("限时免费",
                                fontWeight: FontWeight.w500,
                                fontSize: 20,
                                color: Colours.redBD2929)
                            : Text.rich(TextSpan(
                                style: const TextStyle(
                                    fontWeight: FontWeight.w500,
                                    fontSize: 20,
                                    color: Colours.redBD2929),
                                children: [
                                    TextSpan(text: "${price?.price ?? " "}"),
                                    TextSpan(
                                        text: "球币".changeUnit,
                                        style: const TextStyle(fontSize: 12))
                                  ])),
                        if (price?.info.hasValue == true)
                          Container(
                              margin: const EdgeInsets.only(top: 10),
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 6, vertical: 2),
                              decoration: BoxDecoration(
                                  color: logic.priceIndex != index
                                      ? const Color(0xFFFFF4F4)
                                      : const Color(0xFFFEE7E7),
                                  borderRadius: BorderRadius.circular(15)),
                              child: QsText(
                                price?.info ?? "",
                                needCenter: true,
                                fontSize: 10,
                                color: Colours.grey66,
                              )),
                      ],
                    ),
                  )
                ],
              ),
            ),
            if (price?.tag.hasValue == true) ...[
              Positioned(
                  bottom: 0,
                  child: Image.asset(
                      height: 19, Utils.getImgPath("ai_discount_back.png"))),
              Positioned(
                  bottom: 0,
                  child: Container(
                    height: 19,
                    alignment: Alignment.center,
                    child: QsText(price?.tag ?? "",
                        needCenter: true, fontSize: 10, color: Colours.white),
                  ))
            ]
          ],
        ),
      ),
    );
  }
}
